<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>提交订单</title>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-slide.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <style media="screen">
        .aui-bar-nav.aui-bar-light .aui-iconfont {
            color: #333
        }

        html {
            background: #f2f2f2;
        }

        .btn {
            height: 1.95rem;
            width: 5.35rem;
            line-height: 1.95rem;
            text-align: center;
            border-radius: 1rem;
        }
    </style>
</head>

<body>
    <div id="app">
        <header class="aui-bar aui-bar-nav aui-bar-light">
            <div class="aui-pull-left aui-btn text-color-3">
                <span class="aui-iconfont aui-icon-left"></span>
            </div>
            <div class="aui-title font-18 text-color-3 font-semibold">提交订单</div>
        </header>
        <section style="margin:0.6rem">
            <div class="white-bg-radius text-color-3" style="padding:0.6rem">
                <div class="font-13 " style="margin-bottom:.3rem">
                    提货地址
                </div>
                <div class="font-17 font-semibold">{{shop.addressName}}</div>
                <div class="font-13 flex-align-center" style="margin:.3rem 0 1.4rem 0">
                    <div class="font-semibold">距您{{distance}}</div>
                    <span class='text-color-6' style="padding:0 .3rem">|</span>
                    <div style="color:#257BF0" tapmode @click='openMap'>
                        查看地图
                    </div>
                </div>
                <div class="flex-justify-between">
                    <div class="" style='width:50%'>
                        <div class="text-color-9" >
                            提货人
                        </div>
                        <div class="font-semibold">
                            <input tapmode  v-model='name'  placeholder="点击输入" maxlength="10" style="width:100%">
                        </div>
                    </div>
                    <div style='width:50%'>
                        <div class="text-color-9">预留电话</div>
                        <div class="font-semibold">
                            <input tapmode  v-model='phone'  placeholder="点击输入电话" maxlength="11" style="width:100%">
                        </div>
                    </div>
                </div>

            </div>
        </section>
        <section class='text-color-3 font-13 white-bg-radius' style="margin:0.6rem 0.6rem 3.05rem 0.6rem;padding:0 0.6rem 0.6rem 0.6rem">
            <div class="shop-head flex-align-center" style="height:2.2rem">
                <img src="../image/index/logo1.png" alt="" style="height:.9rem;width:.9rem;margin-right:0.6rem">
                <div class="flex-align-center font-semibold">
                    万嘉便利店
                </div>
            </div>
            <div class="flex" style="position: relative;padding:0.6rem 0" v-for='item in goodsArr'>
                <img src="../image/index/logo1.png" alt="" style="height:4.3rem;width:4.3rem;margin-right:0.6rem">
                <div class="">
                    <div class="font-semibold">
                        {{item.title}}
                    </div>
                    <div class="flex-justify-between" style="position: absolute;bottom:0;width:calc(100% - 4.7rem)">
                        <div class="text-color-9">
                            ×{{item.num}}
                        </div>
                        <div class="font-12">
                            ¥<span class="font-17">{{item.price}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="">
                <div class="height-38 flex-center-between ">
                    <div>优惠券</div>
                    <div class="flex-align-center">
                        <div class="red-text font-12 font-semibold">¥<span class="font-15">2</span></div>
                        <img class='grey-right' src=" ../image/common/grey-right.png" style="margin-left:.25rem">
                    </div>
                </div>
                <div class=" height-38 flex-align-center ">
                    <span style="width:1.75rem">备注</span>
                    <input class='height-38 font-13' v-model='remark'  placeholder='点击填写内容'  style="margin-left:0.6rem">
                </div>
                <div class="height-38 flex-center-between ">
                    <span>小计</span>
                    <div class="red-text font-12 font-semibold">¥<span class="font-17">{{cartInfo.total}}</span></div>
                </div>

            </div>
        </section>
        <section class="bottom-fix height-49 font-15 flex-center-between" style="padding:0 0.6rem">
            <div class="flex-align-center">
                <div>实付</div>
                <div class="red-text font-12 font-semibold">¥<span class="font-20">{{cartInfo.total}}</span></div>
            </div>
            <div class="red-btn btn" @click='showPayModal'>
                提交订单
            </div>
        </section>
    </div>
</body>
<script type="text/javascript " src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js "></script>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            lon: undefined,
            lat: undefined,
            shop: {
              addressName:'福建省福州市马尾区世创大厦'
            },
            distance: 1120,
            name: '',
            phone: '',
            cartInfo:{
              total:88
            },
            goodsArr:[
              {title:'轻食香芒牛肉沙拉瘦身减肥蔬菜三百卡轻食香芒牛肉沙拉瘦身减肥蔬菜三百卡',num:1,price:12.0},
              {title:'轻食香芒牛肉沙拉瘦身减肥蔬菜三百卡轻食香芒牛肉沙拉瘦身减肥蔬菜三百卡',num:2,price:30.0}
            ],
            remark:'', //备注
        },
        mounted() {
            this.getShopInfo(),
            this.getCartInfo()
        },
        methods: {
            //  获得商家信息
            getShopInfo: function() {
                let shopId = api.pageParam.shopId;
                api.ajax({
                    url: 'https://hhppapi.hoshiibuy.com/store/query/shopId',
                    method: 'post',
                    headers: {
                        'Content-Type': 'application/json;charset=utf-8'
                    },
                    data: {}
                }, function(ret, err) {
                    if (ret) {
                        var shop = ret.data;
                        _this.shop = shop;
                        _this.distance = _this.setMtoKm(shop.distance)
                    } else {
                        api.alert({
                            msg: JSON.stringify(err)
                        });
                    }
                });
            },
            // 查询购物车数量信息
            getCartInfo: function() {
                let shopId = $api.pageParam.shopId;
                api.ajax({
                    url: 'https://hhppapi.hoshiibuy.com/cart/getPage',
                    method: 'post',
                    headers: {
                        'Content-Type': 'application/json;charset=utf-8'
                    },
                    data: {
                        body: {
                            pageNumber: "1",
                            pageSize: "5",
                            platformId: 3189609977215975400,
                            storeId: 3317732528147661000,
                            userId: 3317732528147661000
                        }
                    }
                }, function(ret, err) {
                    if (ret) {
                        var cart = ret.data;
                        _this.cartInfo = cart;
                        _this.goodsArr = cart.records
                    } else {
                        api.alert({
                            msg: JSON.stringify(err)
                        });
                    }
                });
            },
            openMap: function() {
                var map = api.require('bMap');
                map.open({
                    rect: {
                        x: 0,
                        y: 0,
                        w: $api.winWidth,
                        h: $api.winHeight
                    },
                    center: {
                        lon: this.shop.lon,
                        lat: this.shop.lat
                    },
                    zoomLevel: 10,
                    showUserLocation: true,
                    fixedOn: api.frameName,
                    fixed: true
                }, function(ret) {
                    if (ret.status) {
                        alert('地图打开成功');
                    }
                });
            },
            //打开支付弹窗
            showPayModal: function() {
                api.openFrame({
                    name: 'pay-modal',
                    url: './modal/pay-modal.html',
                    bounces: true,
                    rect: {
                        x: 0,
                        y: 0,
                        w: api.winWidth,
                        h: api.winHeight
                    },
                    bgColor: 'rgba(0,0,0,0.6)',
                    bounces: false
                })

            },
        },

    });
    apiready = function() {

    };
</script>


</html>
